<template>
    <el-row class="tac">
        <el-col :span="4">
            <el-menu default-active="1" class="el-menu-vertical-demo">

                <el-menu-item index="1" @click="handleOpen">
                    <i class="w-icon-linux"></i>
                    <span slot="title">
                        ubuntu
                        <i class="w-icon-file-add" style="position: absolute;left: 10px" @click.stop="box('Linux')"></i>
                    </span>
                </el-menu-item>
                <el-menu-item index="2" @click="handleOpen">
                    <i class="w-icon-windows"></i>
                    <span slot="title">windows</span>
                </el-menu-item>
            </el-menu>
        </el-col>

        <el-col :span="20">
            <el-table :data="tableData" >
                <el-table-column prop="name" label="名字"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <i class="w-icon-caret-right" @click="runScript(scope.$index)"></i>
                            &nbsp;
                            <i class="w-icon-edit" @click="editScript(scope.$index)"></i>
                            &nbsp;
                            <i class="w-icon-close" @click="delScript(scope.row)"></i>
                            <!--<el-button  @click="runScript(scope.$index)" type="text" size="small">查看</el-button>-->
                            <!--<el-button @click="editScript(scope.$index)" type="text" size="small">编辑</el-button>-->
                        </template>
                    </el-table-column>
            </el-table>
        </el-col>

        <el-dialog :title="dialogType+'脚本'" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                    <el-form-item>
                          <el-input placeholder="名称" v-model="form.name" size = "small" style="width:30%;" >
                              <template slot="append">.sh</template>
                          </el-input>
                        <el-input placeholder="备注" v-model="form.remark" size = "small" style="width:68%;"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-input  type="textarea"   :autosize="{ minRows: 25, maxRows: 30}"
                                   v-model="form.data" >
                        </el-input>
                    </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="accBox()">确 定</el-button>
            </div>
        </el-dialog>


    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                dialogFormVisible:false,
                dialogType:"",
                form:{
                    name:"",
                    remark:"",
                    data:""
                },

            }
        },
        methods: {
            loadList:function(){
                var _this = this
                this.$http.get('./static/scripts/list.json').then(function (res) {
                    _this.tableData = res.data
                })
            },
            runScript:function(idx){
                let name = this.tableData[idx].name

                this.$http.get('api/run/'+name).then(function (res) {
                    console.log(res)
                })
            },
            editScript:function(row){
                console.log(row)
            },
            delScript:function (row) {
                    this.$http.get('api/del_script/'+row.name).then((res)=>{
                        res.data && this.loadList()
                })
            },
            handleOpen(key, keyPath) {
                console.log(1111);
            },
            box(type){
                this.dialogType = type
                if(type === 'Linux'){
                    this.form.data = "#!/usr/bin/env bash \n"
                }
                this.dialogFormVisible = true
            },

            accBox(){
                let data = this.form
                   if(this.dialogType === 'Linux'){
                     data.name += '.sh'
                }

                this.$http.post('api/add_script',data).then((res)=>{
                    if(res.data ==='ok'){
                        this.loadList()
                        this.dialogFormVisible = false
                        this.form.name = ''
                        this.form.data = ''
                        this.form.remark = ''
                    }

                })
            }
        },
        mounted:function () {
            this.loadList()
        }
    }
</script>

<style scoped>
    i {   cursor:pointer; }


</style>